<template>
  <el-dialog v-model="dialog" @close="close" :append-to-body="true" width="730px" title="新建报价单">
    <el-form ref="ruleRefForm" size="small" :model="form" :rules="rules" label-width="80px" class="quoteForm">
        <el-row class="row-item" justify="space-between">
            <el-col :span="12">
                <el-form-item label="报价主题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="报价单号" prop="code">
                    <el-input v-model="form.code" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="row-item" justify="space-between">
            <el-col :span="12">
                <el-form-item label="客户名称" prop="customer">
                    <el-input v-model="form.customer" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="接收人" prop="received">
                    <el-input v-model="form.received" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="row-item" justify="space-between">
            <el-col :span="12">
                <el-form-item label="报价金额" prop="total">
                    <el-input-number v-model="form.total" :min="0" :step="0.01" />
                    <el-checkbox v-model="form.isTaxs" label="是否含税" size="small" style="margin-left:10px;" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="结付方式" prop="payType">
                    <el-select v-model="form.payType" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in payTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="row-item">
            <el-col :span="12">
                <el-form-item label="报价分类" prop="type">
                    <el-select v-model="form.type" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" placeholder="请输入"></el-input>
        </el-form-item>
        <el-row align="middle">
            <span style="font-size:12px;margin-right:5px;">产品详情</span>
            <!-- <el-icon color="var(--el-color-info-dark-2)" size="14px"><ele-EditPen /></el-icon> -->
        </el-row>
        <el-table :data="form.product" size="small" border style="margin-top:10px;">
            <el-table-column label="编号" prop="code"></el-table-column>
            <el-table-column label="产品型号" prop="model"></el-table-column>
            <el-table-column label="产品详情" prop="detail"></el-table-column>
            <el-table-column label="数量" prop="num" width="45px"></el-table-column>
            <el-table-column label="单价" prop="price" width="45px"></el-table-column>
            <el-table-column label="折扣" prop="discount" width="45px"></el-table-column>
            <el-table-column label="合计" prop="total" width="45px"></el-table-column>
            <el-table-column label="税率" prop="tax" width="45px"></el-table-column>
            <el-table-column label="货运方式" prop="logisticType"></el-table-column>
        </el-table>
        <div class="form-shadow-none">
            <el-form-item label="备注" label-width="45px" style="border:1px solid var(--el-border-color-lighter);border-top: none;">
                <el-input type="textarea" v-model="form.orderRemark" placeholder="请输入"></el-input>
            </el-form-item>
        </div>
        <el-form-item label="报价单位" style="margin-top:18px;">
            <span>{{form.company}}</span>
        </el-form-item>
        <el-form-item label="报价经理">
            <span>{{form.manage}}</span>
        </el-form-item>
        <el-form-item label="报价日期">
            <el-date-picker v-model="form.date" type="date" placeholder="请选择" size="small" />
        </el-form-item>
    </el-form>
    <el-row class="footer-fixed">
        <el-button size="small" type="primary" @click="submit(ruleRefForm)">报价单转订单</el-button>
        <el-button size="small" @click="cancel(ruleRefForm)">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { toRefs, computed, reactive, ref } from 'vue'
export default {
    name: 'QuoteCreate',
    props: {
        dialogPop: {
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        const { dialogPop } = toRefs(props)
        const dialog = computed({
            get: () => dialogPop.value,
            set: (val) => {
                context.emit('update:dialogPop', val)
            }
        })
        const state = reactive({
            form: {
                total: 0,
                isTaxs: true,
                product: [],
                company: '广州英地绿壳科技有限公司',
                manage: '杨花花'
            },
            rules: {},
            payTypeList: [{
                label: '全款结付',
                value: '0'
            },{
                label: '分期付款',
                value: '1'
            }],
            typeList: [{
                label: '批发价',
                value: '0'
            }]
        })
        const ruleRefForm = ref()
        const close = () => {
            context.emit("update:dialogPop", false)
        }
        const submit = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    context.emit('onSubmit', true)
                    context.emit("update:dialogPop", false)
                }
            })
        }
        const cancel = async (formEl) => {
            if (!formEl) return
            formEl.resetFields()
            context.emit("update:dialogPop", false)
        }
        return {
            dialog,
            ruleRefForm,
            close,
            submit,
            cancel,
            ...toRefs(state)
        }
    }
}
</script>

<style scoped lang="scss">
.quoteForm{
    padding-bottom: 80px;
    .row-item{
        margin-bottom: 18px;
    }

    .form-shadow-none{
        :deep(.el-textarea__inner) {
            box-shadow: none;
            padding: 3px 0;
        }
    }
}
.footer-fixed{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 10px;
    background: #fff;
    z-index: 999;
    display: flex;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
</style>